<template>
	<div class="page-content">
		<div class="page-title">
			请选择证件类型
			<div style="float: right;"><Timer title="选择证件类型"></Timer></div>
		</div>
		
		<div class="page-main" style="padding-top: 60px;"  >
			<div class="types" @click="setCertificateType"> 
				<a>军官证</a>
				<a>士兵证</a>
				<a>军官离退休证</a>
				<a>港澳台通行证</a>
				<a>境外人员身份证</a>
				<a>外交人员身份证</a>
			</div>
		</div>
		
		<div style="height: 129px;" >
			&nbsp;
		</div>
	</div>
	
</template>

<script>
	//TODO: 10秒超时自动退出
	export default{  
		methods:{
			setCertificateType(event){
				if(event.target.tagName != 'A'){
					return;
				}
				const certype  = event.target.innerText;
				sessionStorage.setItem('certype', certype);
				this.$router.push({path:'/check/input/certificate-info', params:{certificateType:certype}})
				this.send({name:'SelectCertificateType',value:certype,remark:'用户选择证件类型'})
			}
		}
	}
</script>

<style scoped="scoped">
	.page-main{
		height: 695px; background-color: #f8f9fb; padding: 40px; 
		
	}
	
	.types{width:900px; margin: 0 auto; display: grid; grid-template-columns: 450px 450px ;
		grid-template-rows: 110px 110px 110px;
		  grid-row-gap: 30px;
		  grid-column-gap: 30px;}
		
	.page-main a{
		border:solid 1px #ddd;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #1268f9;
		border-radius: 55px;
		color: #fff;
		font-size: 32px;
	}
</style>
